<template>
	<view class="no-warpper">
		<view class="nl-shadow-box mp10 ">
			<view>
				<view class="nl-flex-title">
					<text>费用信息</text>
				</view>
				<view class="nl-flex-list">
					<text>费用名称</text>
					<view class="right-grey">{{fees.feeName}}</view>
				</view>
				<view class="nl-flex-list">
					<text>费用类型</text>
					<view class="right-grey">{{fees.feeTypeCdName}}</view>
				</view>
				<view class="nl-flex-list">
					<text>到期时间</text>
					<view class="right-grey">{{fees.deadlineTime | timeFilter}}</view>
				</view>
				<view class="nl-flex-list">
					<text>开始时间</text>
					<!-- 一次性 -->
					<view class="right-grey" v-if="fees.feeFlag == '2006012'">{{fees.startTime | timeFilter}}</view>
					<!-- 周期性 -->
					<view class="right-grey" v-else>{{fees.endTime | timeFilter}}</view>
				</view>
				<view class="nl-flex-list">
					<text>结束时间</text>
					<!-- <view class="right-grey" v-if="fees.feeFlag == '2006012'">{{fees.endTime | timeFilter}}</view> -->
					<view class="right-grey">{{fees.deadlineTime | timeFilter}}</view>
				</view>
				<view v-if="fees.preDegrees && fees.curDegrees">
					<view class="nl-flex-list">
						<text>上期度数</text>
						<view class="right-grey">{{fees.preDegrees}}</view>
					</view>
					<view class="nl-flex-list">
						<text>本期度数</text>
						<view class="right-grey">{{fees.curDegrees}}</view>
					</view>
				</view>
				<view class="nl-flex-list">
					<text>单价</text>
					<view class="right-grey">{{fees.squarePrice}}</view>
				</view>
				<view class="nl-flex-list">
					<text>金额</text>
					<view class="right-grey">{{fees.feePrice}}</view>
				</view>
				<view class="nl-flex-list">
					<text>费用标识</text>
					<view class="right-grey">{{fees.feeFlagName}}</view>
				</view>
				<view class="nl-flex-list">
					<text>收费状态</text>
					<view class="right-grey">{{fees.stateName}}</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getListFee
	} from '@/api/room.js'
	import {
		mapState
	} from 'vuex'
	import {
		dateSub
	} from '@/utils/dateUtil.js'
	export default {
		data() {
			return {

				fees: { //费用详情
					feeName: '',
					feeTypeCdName: '',
					deadlineTime: '',
					feeFlag: '',
					feeFlagName: '',
					stateName: '',
					startTime: '',
					endTime: '',
					feePrice: '',
					squarePrice: '',
					preDegrees: '',
					curDegrees: '',
				}
			}
		},
		onLoad(option) {
			this.fees.feeName = option.feeName
			this.fees.feeTypeCdName = option.feeTypeCdName
			this.fees.deadlineTime = dateSub(option.deadlineTime, option.feeFlag)
			this.fees.feeFlag = option.feeFlag
			this.fees.feeFlagName = option.feeFlagName
			this.fees.stateName = option.stateName
			this.fees.startTime = option.startTime
			this.fees.endTime = dateSub(option.endTime, option.feeFlag)
			this.fees.feePrice = option.feePrice
			this.fees.squarePrice = option.squarePrice
			this.fees.preDegrees = option.preDegrees
			this.fees.curDegrees = option.curDegrees
			console.log(this.fees)

		},
		computed: {
			...mapState('user', ['userCommunity'])
		},
		methods: {

		},
		filters: {
			timeFilter: (value) => {
				if (!value) return ''
				let time = value.split(' ')[0]
				return time
			}
		}
	}
</script>

<style>
	.mp10 {
		margin-bottom: 32rpx;
	}
</style>
